import 'package:flutter/material.dart';
import 'package:hrcapp/utils/theme_colors.dart';
import 'package:hrcapp/app_routes.dart';

class HRCOnchainCompleteScreen extends StatelessWidget {
  const HRCOnchainCompleteScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // 获取当前时间
    final now = DateTime.now();
    final formattedDate = '${now.year}-${now.month.toString().padLeft(2, '0')}-${now.day.toString().padLeft(2, '0')} ${now.hour.toString().padLeft(2, '0')}:${now.minute.toString().padLeft(2, '0')}:${now.second.toString().padLeft(2, '0')}';

    return Scaffold(
      backgroundColor: ThemeColors.background,
      appBar: AppBar(
        backgroundColor: ThemeColors.cardBg,
        elevation: 0,
        centerTitle: true,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios, size: 16, color: Colors.black),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        title: const Text(
          '上链完成',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
            color: Colors.black,
          ),
        ),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children:
              [
                // 流程指示器
                _buildProcessIndicator(),
                const SizedBox(height: 60),

                // 成功图标
                _buildSuccessIcon(),
                const SizedBox(height: 40),

                // 成功信息
                const Text(
                  '上链成功',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: Colors.black,
                  ),
                ),
                const SizedBox(height: 16),
                const Text(
                  '您的非遗资产已成功数字化并上链',
                  style: TextStyle(
                    fontSize: 16,
                    color: ThemeColors.textSecondary,
                  ),
                ),
                const SizedBox(height: 40),

                // 上链信息卡片
                _buildOnchainInfoCard(context, formattedDate),
                const SizedBox(height: 40),

                // 底部操作按钮
                _buildActionButtons(context),
                const SizedBox(height: 60),
              ],
            ),
          ),
        ),
      ),
    );
  }

  // 构建流程指示器
  Widget _buildProcessIndicator() {
    return SizedBox(
      height: 80,
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        physics: const ClampingScrollPhysics(),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            _buildStepIndicator('资产上传', false, '1'),
            _buildStepConnector(false),
            _buildStepIndicator('认证评估', false, '2'),
            _buildStepConnector(false),
            _buildStepIndicator('价值锚定', false, '3'),
            _buildStepConnector(false),
            _buildStepIndicator('生成通证', false, '4'),
            _buildStepConnector(true),
            _buildStepIndicator('上链完成', true, '5'),
          ],
        ),
      ),
    );
  }

  // 构建步骤指示器
  Widget _buildStepIndicator(String label, bool isActive, String number) {
    return Column(
      children: [
        Container(
          width: 30,
          height: 30,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: isActive ? ThemeColors.primary : const Color(0xFFE5E6EB),
          ),
          child: Center(
            child: Text(
              number,
              style: const TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        ),
        const SizedBox(height: 10),
        Text(
          label,
          style: TextStyle(
            fontSize: 12,
            color: isActive ? ThemeColors.primary : ThemeColors.textSecondary,
          ),
        ),
      ],
    );
  }

  // 构建步骤连接器
  Widget _buildStepConnector(bool isActive, [bool isDashed = false]) {
    return Container(
      height: 2,
      width: 40, // 设置固定宽度以支持水平滚动
      margin: const EdgeInsets.symmetric(horizontal: 4),
      color: isActive ? ThemeColors.primary : const Color(0xFFE5E6EB),
    );
  }

  // 构建成功图标
  Widget _buildSuccessIcon() {
    return Container(
      width: 120,
      height: 120,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: const Color(0xFFF0FFF4),
      ),
      child: Center(
        child: Container(
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: const Color(0xFFE6FFED),
          ),
          child: Center(
            child: Icon(
              Icons.check,
              size: 60,
              color: const Color(0xFF52C41A),
            ),
          ),
        ),
      ),
    );
  }

  // 构建上链信息卡片
  Widget _buildOnchainInfoCard(BuildContext context, String formattedDate) {
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
        color: ThemeColors.cardBg,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child:
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              '上链信息',
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
                color: Colors.black,
              ),
            ),
            const SizedBox(height: 30),

            // 通证名称
            _buildInfoItem('通证名称', '苏绣花鸟图轴通证'),
            const SizedBox(height: 25),

            // 通证符号
            _buildInfoItem('通证符号', 'SSHT2023'),
            const SizedBox(height: 25),

            // 上链时间
            _buildInfoItem('上链时间', formattedDate),
            const SizedBox(height: 25),

            // 区块链地址
            _buildInfoItem('区块链地址', '0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D', true),
            const SizedBox(height: 25),
            
            // 数字权证
            _buildCertificateLink(context),
          ],
        ),
      ),
    );
  }

  // 构建信息项
  Widget _buildInfoItem(String label, String value, [bool isLink = false]) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children:
      [
        Text(
          label,
          style: TextStyle(
            fontSize: 14,
            color: ThemeColors.textSecondary,
          ),
        ),
        const SizedBox(width: 10),
        Expanded(
          child:
          Text(
            value,
            style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.bold,
              color: isLink ? ThemeColors.primary : Colors.black,
            ),
            overflow: TextOverflow.ellipsis,
            maxLines: 1,
          ),
        ),
      ],
    );
  }

  // 构建数字权证链接
  Widget _buildCertificateLink(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children:
      [
        Text(
          '数字权证',
          style: TextStyle(
            fontSize: 14,
            color: ThemeColors.textSecondary,
          ),
        ),
        const SizedBox(width: 10),
        Expanded(
          child:
          GestureDetector(
            onTap: () {
              // 点击权证详情跳转到数字权证页面
              Navigator.pushNamed(context, AppRoutes.digitalCertificate);
            },
            child:
            Text(
              '权证详情',
              style: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.bold,
                color: ThemeColors.primary,
              ),
            ),
          ),
        ),
      ],
    );
  }

  // 构建操作按钮
  Widget _buildActionButtons(BuildContext context) {
    return Row(
      children:
      [
        Expanded(
          child:
          Container(
            height: 50,
            decoration: BoxDecoration(
              color: const Color(0xFFF0F2F5),
              borderRadius: BorderRadius.circular(25),
            ),
            child: TextButton(
              onPressed: () {
                // 查看详情按钮点击事件，跳转到链上详情页面
                Navigator.pushNamed(context, AppRoutes.nftOnchainDetail);
              },
              child:
              const Text(
                '查看详情',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                ),
              ),
            ),
          ),
        ),
        const SizedBox(width: 20),
        Expanded(
          child:
          Container(
            height: 50,
            decoration: BoxDecoration(
              color: ThemeColors.primary,
              borderRadius: BorderRadius.circular(25),
              boxShadow: [
                BoxShadow(
                  color: ThemeColors.primary.withOpacity(0.3),
                  spreadRadius: 2,
                  blurRadius: 5,
                  offset: const Offset(0, 3),
                ),
              ],
            ),
            child: TextButton(
              onPressed: () {
                // 返回首页按钮点击事件
                Navigator.pushNamedAndRemoveUntil(context, AppRoutes.home, (route) => false);
              },
              child:
              const Text(
                '返回首页',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}